<template>
	<el-dialog width="500px" :visible.sync="visible" title="导出" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="startDate" label="开始日期">
				<el-date-picker :picker-options="startDatePicker" v-model="dataForm.startDate" type="date"
					value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择开始日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item prop="endDate" label="结束日期">
				<el-date-picker :picker-options="endDatePicker" v-model="dataForm.endDate" type="date"
					value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择结束日期">
				</el-date-picker>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	import qs from 'qs'
	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					startDate: '',
					endDate: ''
				},
				data: '',
				uploadUrl: '',
				startDatePicker: this.beginDate(),
				endDatePicker: this.endDate(),
			}
		},
		computed: {
			dataRule() {
				return {
					startDate: [{
						required: true,
						message: '开始日期不能为空',
						trigger: 'blur'
					}],
					endDate: [{
						required: true,
						message: '结束日期不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			init(dataForm, url) {
				this.visible = true
				this.data = dataForm
				this.uploadUrl = url
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
				})
			},
			beginDate() {
				const self = this;
				return {
					disabledDate(time) {
						if (self.dataForm.endDate) {
							const start = new Date(self.dataForm.endDate); // 结束时间
							start.setDate(start.getDate() - 60);
							return new Date(self.dataForm.endDate).getTime() < time.getTime() || time.getTime()<start;
						}
					},
				}
			},
			endDate() {
				const self = this;
				return {
					disabledDate(time) {
						if (self.dataForm.startDate) {
							const end = new Date(self.dataForm.startDate); // 结束时间
							end.setDate(end.getDate() + 60);
							return new Date(self.dataForm.startDate).getTime() > time.getTime() || time.getTime()>end ;
						}
					},
				}
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				this.$refs['dataForm'].validate((valid) => {
					if (!valid) {
						return false
					}
					this.fullscreenLoading = true
					this.dataForm.startDate =this.dataForm.startDate +' 00:00:00'
					this.dataForm.endDate =this.dataForm.endDate +' 23:59:59'
					var params = qs.stringify({
						// 'token': Cookies.get('token'),
						...this.data,
						...this.dataForm
					})
					if(this.uploadUrl=='psc/faillog/mixexport'){
						this.fullscreenLoading = true
						this.$http.get(`psc/faillog/mixexport?${params}`,
						    {
						        responseType: 'blob',
						    }).then(res => {
						        // 获取文件名
						        let fileName = res.headers["content-disposition"]
						            .split(";")[1]
						            .split("filename=")[1];
						    
						        // 文件名解码
						        fileName = decodeURI(fileName);
						        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'arraybuffer' }))
						        const link = document.createElement('a')
						        link.style.display = 'none'
						        link.href = url
						        var mon = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
						        var day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
						        var time = new Date().getFullYear() + '' + mon + '' + day
						        link.setAttribute('download', fileName)
						        document.body.appendChild(link)
						        link.click()
						        document.body.removeChild(link)
						        this.fullscreenLoading = false
						        //弹出弹框
						        this.$message({
						            message: '下载成功,文件在C:\Users\OIS\Downloads(c:\用户\OIS\下载)',
						            type: 'success',
						            duration: 3000,
						            onClose: () => {
										this.visible =false
						            }
						        })
						    }).catch(()=>{
						        this.fullscreenLoading = false
						    })
					}else{
						this.$http.get(
							`${window.SITE_CONFIG['apiURL']}${this.uploadUrl}?${params}`, {
								responseType: 'blob',
							}).then(res => {
							let url = window.URL.createObjectURL(new Blob([res.data], {
								type: 'arraybuffer'
							}))
							const link = document.createElement('a')
							// 获取文件名
							let fileName = res.headers["content-disposition"]
								.split(";")[1]
								.split("filename=")[1];
						
							// 文件名解码
							fileName = decodeURI(fileName);
						
							link.style.display = 'none'
							link.href = url
							link.setAttribute('download', fileName)
							document.body.appendChild(link)
							link.click()
							document.body.removeChild(link)
							this.fullscreenLoading = false
							//弹出弹框
							this.$message({
								message: '下载成功,文件在C:\\Users\\OIS\\Downloads(c:\\用户\\OIS\\下载)',
								type: 'success',
								duration: 3000,
								onClose: () => {
									this.visible =false
								}
							})
						}).catch(() => {
							this.fullscreenLoading = false
						})
					}
					
				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})
		}
	}
</script>